<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生个人信息</title>

    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        header {
            text-align: center;
            margin-bottom: 20px;
        }

        h1 {
            color: #333;
        }

        .profile {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .profile-photo {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-right: 20px;
        }

        .profile-info {
            flex: 1;
        }

        .profile-info h2 {
            margin: 0;
            color: #333;
        }

        .profile-info p {
            margin: 5px 0;
            color: #666;
        }

        footer {
            text-align: center;
            margin-top: 20px;
            color: #999;
        }

    </style>

    <script>
        window.onload = function (){

            function getQueryParam(param) {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get(param);
            }

            // 获取名为 'no' 的参数
            const no = getQueryParam('no');
            console.log(no);

            let url = "http://localhost:8090/user/query?no=" + no;

            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 假设服务器返回JSON格式的响应
                    console.log(xhr.responseText);
                    if (xhr.responseText === "{}") {
                        return;
                    }
                    const response = JSON.parse(xhr.responseText);

                    console.log(Number(response.no))

                    document.getElementById("name").innerText = response.name;
                    document.getElementById("no").innerText =  '学号: ' + response.no;
                    document.getElementById("sex").innerText = '性别: ' + response.sex;
                    document.getElementById("age").innerText = '年龄: ' + response.age;
                    document.getElementById("dept").innerText = '学院: ' + response.dept;
                    document.getElementById("cls").innerText = '班级: ' + response.cls;

                } else if (xhr.readyState === 4) {
                    alert('加载失败！');
                }
            };
            xhr.send();
        }
    </script>

</head>
<body>
<div class="container">
    <header>
        <h1>学生个人信息</h1>
    </header>
    <section class="profile">
        <img src="/images/head.jpeg" alt="学生照片" class="profile-photo">
        <div class="profile-info">
            <h2 id="name">姓名</h2>
            <p id="no">学号: </p>
            <p id="cls">班级: </p>
            <p id="age">年龄: </p>
            <p id="sex">性别: </p>
            <p id="dept">学院: </p>
        </div>
    </section>
    <footer>
        <p>版权所有 &copy; 2025</p>
    </footer>
</div>
</body>
</html>
